<template>
    <div>
        <!-- 面包屑导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>轮播管理</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card>
            <div class="whole-flex-center-between whole-top-handle">
                <div class="search-area">
                    <el-button size="small" @click="clearFilter" style="margin-right:20px">重置所有筛选</el-button>
                    <el-col :span="3" class="margin-r-5">
                        <el-input size="small" v-model="nameValue" placeholder="输入要查询的图片名称" clearable></el-input>
                    </el-col>
                    <el-button class="margin-r-5" size="small" @click="getBannerList(1,nameValue)">查询</el-button>
                </div>
            </div>
            <el-row>
                <el-button size="small" type="primary" @click="addbanner()">新增</el-button>
            </el-row>
            <div class="whole-flow-table-box">
                <el-table ref="myTable" :data="agentList" style="width: 100%" stripe border>
                    <!-- <el-table-column align="center" type="selection" width="40"></el-table-column> -->
                    <el-table-column align="center" prop="id" label="ID" width="60"></el-table-column>
                    <el-table-column align="center" prop="name" label="名称"></el-table-column>
                    <el-table-column align="center" prop="path" label="图片">
                        <template slot-scope="scope">
                            <div class="img-box" :style="'background-image:url(' + scope.row.path + ')'"></div>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="status" label="状态" width="120">
                        <template slot-scope="scope">
                            <span>{{scope.row.status==1?'上架':'下架'}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="sorting" label="排序"></el-table-column>
                    <el-table-column align="center" label="操作">
                        <template slot-scope="scope" width="200">
                            <el-button size="mini" type="text" @click="deleteBanner(scope.row.id)">删除</el-button>
							<el-button size="mini" type="text" @click="editBanner(scope.row)">编辑</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="whole-pagination">
                    <el-pagination :page-size="size" background layout="prev, pager, next" :total="count"></el-pagination>
                </div>
            </div>
        </el-card>
    </div>
</template>
<script>
export default {
    data() {
        return {
            agentList: [],
            count: 0,
            size: 10,
            page: 1,
            nameValue: "",
        };
    },
    created() {
        this.getBannerList(this.page);
    },
    methods: {
        clearFilter() {
            this.$refs.myTable.clearFilter();
            (this.nameValue = "");
            (this.numValue = "");
            this.getBannerList(1)
        },
        getBannerList(page, name) {
            let _this = this;
            this.$axios({
                url: "admin/home/getShuffling",
                data: {
                    offset: page,
                    limit: _this.size,
                },
                success(res) {
                    if (res.data.code == 200) {
                        _this.agentList = res.data.content.data;
                        _this.count = Number(res.data.content.count);
                    }
                },
            });
        },
        deleteBanner(id) {
            let _this=this;
            this.$confirm("您确定要删除么?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    this.$axios({
                        url: "admin/home/delShuffling",
                        data: {
                            shufflingIDS:[id],
                        },
                        success(res) {
                            if (res.data.code === 200) {
                                _this.$message({
                                    type: "success",
                                    message: res.data.msg
                                });
                                _this.getBannerList(_this.page);
                            } else {
                                _this.$message({
                                    type: "warning",
                                    message: res.data.msg
                                });
                            }
                        }
                    });
                });
        },
        // 新增banner
        addbanner() {
            this.$router.push({ path: "add", query: { type: 1, } });
        },
		editBanner(info){
			this.$router.push({ path: "add", query: { type: 2,info:info } });
		}
    },
};
</script>
<style scoped>
.a {
    vertical-align: middle;
}
.img-box {
    width: 150px;
    height: 40px;
    margin: 0 auto;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
</style>